<template>
  <div>
    <Card>
      <div v-if="radioGroup.length>0">
        <div class="title">单选题</div>
        <div class="question" v-for="(item,index) in radioGroup" :key="index">
          <div class="questionTitle">{{index+1}}.{{item.questiondetail}}</div>
          <RadioGroup vertical style="padding-left:20px" v-model="radioAnswer[index]">
            <Radio :label="item.questionindex+'|A'" v-if="item.a">
              <span class="questionOption">A.{{item.a}}</span>
            </Radio>
            <Radio :label="item.questionindex+'|B'" v-if="item.b">
              <span class="questionOption">B.{{item.b}}</span>
            </Radio>
            <Radio :label="item.questionindex+'|C'" v-if="item.c">
              <span class="questionOption">C.{{item.c}}</span>
            </Radio>
            <Radio :label="item.questionindex+'|D'" v-if="item.d">
              <span class="questionOption">D.{{item.d}}</span>
            </Radio>
            <Radio :label="item.questionindex+'|E'" v-if="item.e">
              <span class="questionOption">E.{{item.e}}</span>
            </Radio>
            <Radio :label="item.questionindex+'|F'" v-if="item.f">
              <span class="questionOption">F.{{item.f}}</span>
            </Radio>
            <Radio :label="item.questionindex+'|G'" v-if="item.g">
              <span class="questionOption">G.{{item.g}}</span>
            </Radio>
          </RadioGroup>
        </div>
      </div>
      <div v-if="multipleGroup.length>0">
        <div class="title">多选题</div>
        <div class="question" v-for="(item,index) in multipleGroup" :key="index">
          <div class="questionTitle">{{index+1}}.{{item.questiondetail}}</div>
          <CheckboxGroup
            style="padding-left:20px"
            v-model="multipleAnswer[index]"
            @on-change="checkboxChange"
          >
            <Checkbox :label="item.questionindex+'|A'" v-if="item.a">
              <span class="questionOption">A.{{item.a}}</span>
            </Checkbox>
            <br />
            <Checkbox :label="item.questionindex+'|B'" v-if="item.b">
              <span class="questionOption">B.{{item.b}}</span>
            </Checkbox>
            <br />
            <Checkbox :label="item.questionindex+'|C'" v-if="item.c ">
              <span class="questionOption">C.{{item.c}}</span>
            </Checkbox>
            <br />
            <Checkbox :label="item.questionindex+'|D'" v-if="item.d">
              <span class="questionOption">D.{{item.d}}</span>
            </Checkbox>
            <br />
            <Checkbox :label="item.questionindex+'|E'" v-if="item.e">
              <span class="questionOption">E.{{item.e}}</span>
            </Checkbox>
            <br />
            <Checkbox :label="item.questionindex+'|F'" v-if="item.f">
              <span class="questionOption">F.{{item.f}}</span>
            </Checkbox>
            <br />
            <Checkbox :label="item.questionindex+'|G'" v-if="item.g">
              <span class="questionOption">G.{{item.g}}</span>
            </Checkbox>
          </CheckboxGroup>
        </div>
      </div>
      <div v-if="judgeGroup.length>0">
        <div class="title">判断题</div>
        <div class="question" v-for="(item,index) in judgeGroup" :key="index">
          <div class="questionTitle">{{index+1}}.{{item.questiondetail}}</div>
          <RadioGroup vertical style="padding-left:20px" v-model="judgeAnswer[index]">
            <Radio :label="item.questionindex+'|A'" v-if="item.a">
              <span class="questionOption">A.{{item.a}}</span>
            </Radio>
            <Radio :label="item.questionindex+'|B'" v-if="item.b">
              <span class="questionOption">B.{{item.b}}</span>
            </Radio>
            <Radio :label="item.questionindex+'|C'" v-if="item.c">
              <span class="questionOption">C.{{item.c}}</span>
            </Radio>
            <Radio :label="item.questionindex+'|D'" v-if="item.d">
              <span class="questionOption">D.{{item.d}}</span>
            </Radio>
            <Radio :label="item.questionindex+'|E'" v-if="item.e">
              <span class="questionOption">E.{{item.e}}</span>
            </Radio>
            <Radio :label="item.questionindex+'|F'" v-if="item.f">
              <span class="questionOption">F.{{item.f}}</span>
            </Radio>
            <Radio :label="item.questionindex+'|G'" v-if="item.g">
              <span class="questionOption">G.{{item.g}}</span>
            </Radio>
          </RadioGroup>
        </div>
      </div>
      <div style="text-align:center">
        <Button type="primary" @click="submit" style="margin-right:20px" :loading="submitLoading">提交</Button>
        <Button type="primary" @click="back">返回</Button>
      </div>
    </Card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      item: this.$route.query.item,
      radioAnswer: [],
      multipleAnswer: [],
      judgeAnswer: [],
      radioGroup: [],
      multipleGroup: [],
      judgeGroup: [],
      submitLoading: false
    };
  },
  methods: {
    // 返回
    back() {
      this.$router.replace({
        name: "examResultDetail",
        query: {
          item: this.item
        }
      });
    },

    submit() {
      this.submitLoading = true;
      let arrIndex = 0;
      let tempArr = []
      this.multipleAnswer.forEach(element => {
        if (element.length > 0) {
          let temp = "";
          let index = 0;
          element.forEach(answer => {
            if (index === 0) {
              temp = answer;
            } else {
              temp += "、" + answer.split("|")[1];
            }
            index++;
          });
          tempArr.push(temp);
        }
        arrIndex++;
      });
      console.log(tempArr)
      let answer = [];
      if (this.radioAnswer.length > 0) {
        this.radioAnswer.forEach(element => {
          answer.push(element);
        });
      }
      if (tempArr.length > 0) {
        tempArr.forEach(element => {
          answer.push(element);
        });
      }
      if (this.judgeAnswer.length > 0) {
        this.judgeAnswer.forEach(element => {
          answer.push(element);
        });
      }
      let obj = {
        answers: answer + "",
        trainid: this.item.trainid
      };
      console.log(obj)
      this.apiB.answerOnLine(obj).then(res => {
        if (res.code == 200 && res.data != null) {
          this.submitLoading = false;
          this.$Message.info("提交成功");
          this.$router.replace({
            name: "examResultDetail",
            query: {
              item: this.item
            }
          });
        } else {
          this.submitLoading = false;
          this.$Message.info(res.msg);
        }
      });
    },

    // 处理多选框选择结果
    checkboxChange(value) {
      // console.log(this.multipleAnswer);
    },

    // 初始化
    initial() {
      this.apiB.selectTrainTemplate({ trainid: this.item.trainid }).then(res => {
        if (res.code == 200 && res.data != null) {
          if (
            res.data.uerTrainQuestionOneVO &&
            res.data.uerTrainQuestionOneVO.length > 0
          ) {
            this.radioGroup = res.data.uerTrainQuestionOneVO;
          }
          if (
            res.data.uerTrainQuestionMoreVO &&
            res.data.uerTrainQuestionMoreVO.length > 0
          ) {
            this.multipleGroup = res.data.uerTrainQuestionMoreVO;
          }
          if (
            res.data.uerTrainQuestionJudgeVO &&
            res.data.uerTrainQuestionJudgeVO.length > 0
          ) {
            this.judgeGroup = res.data.uerTrainQuestionJudgeVO;
          }
        }
      });
    }
  },
  mounted() {
    this.initial();
  },
  beforeDestroy() {
    this.item = null;
    this.radioAnswer = null;
    this.multipleAnswer = null;
    this.judgeAnswer = null;
    this.radioGroup = null;
    this.multipleGroup = null;
    this.judgeGroup = null;
    this.submitLoading = null;
  }
};
</script>
<style scoped lang="less">
@import "./index";
</style>

<style>
.ivu-checkbox-group-item {
  margin-bottom: 10px;
}
</style>